<template>
	<view class="bb">
		<view>{{nowtime}}</view>
		<view>客服小小为你服务</view>
		<view>
			<view :class="v.id==id?'my':'you'" v-for="v in xiaoxixuan"><image src="../../static/logo.png" :class="v.id==id?'youtouxiang':'youtouxiang1'" ></image><text class="xiaoxi">{{v.myxiaoxi}}</text><image :src='IP+touxaingdizhi' :class="v.id==id?'mytouxiang1':'mytouxiang'"></image></view>
		</view>
		<view>
			<view>
				<text class="iconfont icon-zaixiankefu"></text>
				<input placeholder="请输入..." v-model="myxiaoxi"/>
				<button @click="fasong" type="primary">发送</button>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		toRefs,
		onMounted,
		reactive,
		computed
	} from 'vue'
import http from '../../utils/http.js'
import store from '../../store/index.js'
	export default {
		setup() {
			
			let data = reactive({
				myxiaoxi: "",
				xiaoxixuan:[],
				nowtime:'',
				touxaingdizhi:'',
				IP:'',
				id:store.state.userID,
				fasong: () => {
					let m={myxiaoxi:data.myxiaoxi,id:data.id}
					let msg=JSON.stringify(m)
						uni.sendSocketMessage({ //给后台发送信息
							data:msg
						});
						data.myxiaoxi=''
				},
				getTimes() {
				      let myDate = new Date();
				      let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
				      let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				      let myToday = myDate.getDate(); //获取当前日(1-31)
				      let myHour = myDate.getHours(); //获取当前小时数(0-23)
				      let myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
				      let mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
				      let nowTime;
				      myMonth = myMonth < 10 ? "0" + myMonth : myMonth;
				      myToday = myToday < 10 ? "0" + myToday : myToday;
				      myHour = myHour < 10 ? "0" + myHour : myHour;
				      myMinute = myMinute < 10 ? "0" + myMinute : myMinute;
				      mySecond = mySecond < 10 ? "0" + mySecond : mySecond;
				      nowTime =
				        myYear +
				        "-" +
				        myMonth +
				        "-" +
				        myToday +
				        " " +
				        myHour +
				        ":" +
				        myMinute +
				        ":" +
				        mySecond;
						data.nowtime=nowTime
						console.log(data.nowtime)
				    },
					
			})
			 var socketOpen = false;
			var socketMsgQueue = [];
			onMounted(() => {
				data.getTimes()
			let m={myxiaoxi:"您好，请问有什么需要帮助的？",id:99999}
			let msg=JSON.stringify(m)
			const token =uni.getStorageSync('token')
				uni.connectSocket({
					url: 'ws://localhost:9999',
						header: {
							'token': 'token'
						},
				});
				uni.onSocketOpen(function(res) {
				 	console.log('WebSocket连接已打开！');
					socketOpen = true;
					uni.sendSocketMessage({ //给后台发送信息
						data:msg
					});
				});
				uni.onSocketError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
				});
				uni.onSocketMessage(function(res) {
					const json=JSON.parse(res.data);
					data.xiaoxixuan.push(json)
					// console.log(data.xiaoxixuan)
				});
				data.IP=store.state.IP
				http({
					url:'/SetBasic/getouxiang',
					method:'get',
					data:{
						id:1
					}
				}).then((res)=>{
					data.touxaingdizhi=res.data.data[0].y_imgsrc
					console.log(data.touxaingdizhi)
				})
			})
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style lang="less">
	@import url("~@/static/fonts/iconfont.css");

	.bb {
		padding: 0 25rpx;
		font-size: 35rpx;
		position: relative;

		&>view {
			&:nth-child(1) {
				text-align: center;
				margin: 30rpx 0;
			}

			&:nth-child(2) {
				text-align: center;
				margin: 0 80rpx;
				background-color: #F2F2F2;
				padding: 18rpx 0;
				border-radius: 10rpx;
			}

			&:last-child {
				position: fixed;
				bottom: 30rpx;
				width: 720rpx;
				padding: 0 15rpx 0 5rpx;
				box-sizing: border-box;

				&>view {
					display: flex;
					justify-content: space-between;

					input {
						border: 1rpx solid #999999;
						width: 500rpx;
						border-radius: 10rpx;
					}
				}

			}
		}
	}

	.iconfont {
		font-size: 55rpx;
	}

	.my {
		display: flex;
		margin: 25rpx 0;
		 float: right;
		 clear: both;
	}
	.you{
		display: flex;
		margin: 25rpx 0;
		
	}
	.mytouxiang1,.youtouxiang1{
		width: 100rpx;
		height: 100rpx;
		display: block;
	}
	.mytouxiang1{
		margin-left: 20rpx;
	}
	.youtouxiang1{
		margin-right: 20rpx;
	}
	.youtouxiang{
		display: none;
		
	}
	.mytouxiang{
		display: none;
		
	}
	.xiaoxi{
		box-sizing: border-box;
		display: inline-block;
		border: 1rpx solid #F2F2F2;
		padding:0 30rpx;
	line-height: 100rpx;
	background-color: #FFFFFF;
	}
	button{
		height: 60rpx;
		font-size: 35rpx;
		padding:0 20rpx;
		line-height: 60rpx;
		
	}
</style>
